<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 表格</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit" @tab-click="handleClick">
                <el-tab-pane v-for="(item,index) in barData" :key="item.set_id" :label="item.set_name" :name="item.set_id" >
                   <div class="handle-box">
                      <el-button type="primary" icon="el-icon-edit" @click="barEdit(index)">修改头部导航</el-button>
                      <el-button type="primary" icon="el-icon-plus" @click="handleAdd(index)">添加</el-button>
                     <!--  <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
                      

                     <!--  <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                          <el-option key="1" label="广东省" value="广东省"></el-option>
                          <el-option key="2" label="湖南省" value="湖南省"></el-option>
                      </el-select> -->
                      <!-- <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                      <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
                  </div>
                    <el-table :data="data"  border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                    <!--   <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                     
                      <el-table-column prop="set_type_name" label="名称" align="center">
                      </el-table-column>
                      <el-table-column prop="add_price" label="加价" align="center">
                      </el-table-column>
                      <el-table-column prop="groom" label="是否推荐" align="center" :formatter="formGroom">
                       <!--  <template slot-scope='scope'>
                          <el-radio-group v-model="scope.row.groom">
                              <el-radio :label="0">否</el-radio>
                              <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </template> -->

                      </el-table-column>
                       <el-table-column prop="update_time" label="更新时间" sortable align="center">
                      </el-table-column>
              
                      <el-table-column fixed='right' label="操作" align="center">
                          <template slot-scope="scope">
                              <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                              <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                          </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
                    </el-pagination>
                </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="+" name="0"> -->
                   <!-- <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item
                      label="添加分类"
                      prop="age"
                      :rules="[
                        { required: true, message: '年龄不能为空'},
                      ]"
                    >
                      <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                      <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                    </el-form-item>
                  </el-form> -->
                <!-- </el-tab-pane> -->
               <!--  <el-tab-pane label="加料" name="2" >
                    加料
                </el-tab-pane> -->
              </el-tabs>
        </div>
<!-- 编辑bar弹出框 -->
       <el-dialog :title="barTitle" :visible.sync="editBar">
        <el-form :model="bar">
          <el-form-item label="导航名称" :label-width="formLabelWidth">
            <el-input v-model="bar.set_name" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="英文名称" :label-width="formLabelWidth">
            <el-input v-model="bar.as_name" autocomplete="off"></el-input>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editBar = false">取 消</el-button>
          <el-button type="primary" @click="saveBar">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除ban提示框 -->
        <el-dialog title="提示" :visible.sync="delBar" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delBar = false">取 消</el-button>
                <el-button type="primary" @click="deleteBar">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑规格弹出框 -->
       <el-dialog :title="title" :visible.sync="editVisible">
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.set_type_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="加价" :label-width="formLabelWidth">
            <el-input-number v-model="form.add_price" :precision="2" :step="0.1" :min='0'></el-input-number>
          </el-form-item>
          <el-form-item label="是否推荐" :label-width="formLabelWidth">
           <el-radio-group v-model="form.groom">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
  export default {
    inject:['reload'],
    data() {
      return {

        editableTabsValue: '1',
        barData:[],
        admininfo:JSON.parse(localStorage.getItem('ms_username')),
        tableData: [],
        barDataLength: '',
        cur_page: 1,
        multipleSelection: [],
        select_cate: '',
        select_word: '',
        del_list: [],
        is_search: false,
        editVisible: false,
        delVisible: false,
        form: {
            set_type_name: '',
            update_time: '',
            add_price: '',
            groom:'',
            set_type_id:'',

        },
        idx: -1,
        total:1,
        // editVisible: false,
        formLabelWidth: '120px',
        radio2:'',
        title:'',

        /*头部导航*/
        barTitle:'',
        editBar:false,
        delBar:false,
        bar:{
          set_id:'',
          set_name:'',
          as_name:'',
        },
        barID:-1,

      };
    },
    created() {
            this.getBar();
            // this.getData();
        },
    computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.set_type_name === this.del_list[i].set_type_name) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if(d.set_type_name.indexOf(this.select_word) > -1 ) {
                            return d;
                        }
                    }
                })
            }
        },
    methods: {
      getBar() {
            this.$axios.get('admin/set/settype', {
                  params:{
                      aid: this.admininfo['admin_id'],
                      token: this.admininfo['token'],
                      // page: this.cur_page
                  }
              }).then((res) => {
                  this.barData = res.data.data;
                   // console.log(res.data.data);
                   this.barDataLength = this.barData.length
                   this.editableTabsValue = res.data.data[0].set_id
                   this.getData(res.data.data[0].set_id);
              })

          },
      getData(set_id){
        // console.log(set_id);
            this.$axios.get('admin/set/typeinfo', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],
                        // type_id: this.editableTabsValue,
                        type_id:set_id,
                        page: this.cur_page
                    }
                }).then((res) => {
                   if(res.data.status == 0){
                            this.tableData = res.data.data.data;
                            this.total = res.data.data.total 
                        }else if(res.data.status == 3){
                           this.$router.push('login') 
                        }
                     
                })
          },
      handleClick(tab, event) {
        this.editableTabsValue = tab.paneName;
        // console.log(tab)
        // console.log(event)
        this.getData(this.editableTabsValue)
      },
      handleCurrentChange(val) {
          this.cur_page = val;
          // console.log(val)
          this.getData();
      },
      // 获取 easy-mock 的模拟数据
      search() {
          this.is_search = true;
      },
      formatter(row, column) {
          return row.address;
      },
      formGroom(row, column){
        switch(row.groom){
                    case 1:
                        return '是';
                        break;
                    default:
                        return '否';
                        break;
                }
      },
      filterTag(value, row) {
          return row.tag === value;
      },
       handleAdd(id){
        // console.log(id)
        this.title = '添加'
        this.barID = id;
        this.form = {
              set_type_name: '',
              add_price: '',
              groom: '',
          }
        this.editVisible = true 

      },
      handleEdit(index ,row) {
          this.title = '编辑'
          this.idx = index;
          const item = this.tableData[index];
          this.form = {
              set_type_id: item.set_type_id,
              set_type_name: item.set_type_name,
              add_price: item.add_price,
              groom: item. groom,
              set_id:item.set_id,
          }
          this.editVisible = true;
          // console.log(uid)
      },
      handleDelete(index, row) {
          this.idx = index;
          this.delVisible = true;
      },
      delAll() {
          const length = this.multipleSelection.length;
          let str = '';
          this.del_list = this.del_list.concat(this.multipleSelection);
          for (let i = 0; i < length; i++) {
              str += this.multipleSelection[i].name + ' ';
          }
          this.$message.error('删除了' + str);
          this.multipleSelection = [];
      },
      handleSelectionChange(val) {
          this.multipleSelection = val;
      },
      // 保存编辑
      saveEdit() {
          // this.$set(this.tableData, this.idx, this.form);
          // this.editVisible = false;
          // this.$message.success(`修改第 ${this.idx+1} 行成功`);
          if(this.title == '添加'){
            // console.log(this.barID);
          this.$axios.post('admin/set/typeadd',{
            aid:this.admininfo.admin_id,
            token:this.admininfo.token,
            set_id:this.barData[this.barID].set_id,
            data:this.form
           }).then((res) => {
            if(res.data.status == 0){
              this.$message.success(`${this.barData[this.barID].set_name}添加成功`);
              this.reload()
            }else{
              this.$message.error(`${this.barData[this.barID].set_name}${res.data.msg}`)
            }
           })

          }else if(this.title == '编辑'){
            this.$axios.post('admin/set/typeup',{
              aid:this.admininfo.admin_id,
              token:this.admininfo.token,
              data:this.form
             }).then((res) => {
              if(res.data.status == 0){
                this.$message.success(`修改成功`);
                this.reload()
              }else{
                this.$message.error(res.data.msg)
              }
             })
          }
      },
      // 确定删除
      deleteRow(){

          // this.tableData.splice(this.idx, 1);
          // this.$message.success('删除成功');
          // this.delVisible = false;
          this.$axios.post('admin/set/typedel',{
              aid:this.admininfo.admin_id,
              token:this.admininfo.token,

              set_type_id: this.tableData[this.idx].set_type_id
             }).then((res) => {
              if(res.data.status == 0){
                this.$message.success(`删除成功`);
                this.reload()
              }else{
                this.$message.error(res.data.msg)
              }
             })

      },
       handleTabsEdit(targetName, action) {
        if (action === 'add') {
          // let newTabName = ++this.barDataLength + '';
          // this.barData.push({
          //   set_name: 'New Tab',
          //   set_id: newTabName,

          // });
          // this.editableTabsValue = newTabName;
          this.barTitle = "添加导航"
          this.editBar = true
          // const item = this.barData[id];
          this.bar = {
            set_name:'',
            // as_name:''
          }
        }
        if (action === 'remove') {
          for(var i = 0 ; i< this.barData.length ;i++)
          {
            if(this.barData[i].set_id === targetName){
              this.barID = i;

            }
          }
        
          this.delBar = true
          // let tabs = this.barData;
          // // console.log(tabs.length)
          // let activeName = this.editableTabsValue;
          // console.log(targetName)
          // if (activeName === targetName) {
          //   tabs.forEach((tab, index) => {
          //     // console.log(tab.set_id === targetName)
          //     if (tab.set_id === targetName) {
          //       let nextTab = tabs[index + 1] || tabs[index - 1];
          //       if (nextTab) {
          //         activeName = nextTab.set_id;
          //       }
          //     }
          //   });
          // }
          
          // this.editableTabsValue = activeName;
          // this.barData = tabs.filter(tab => tab.set_id !== targetName);
        }
      },
      barEdit(id){
        this.barTitle = "编辑导航"
        this.barID = id;
        this.editBar = true
        const item = this.barData[id];
        this.bar = {
          set_id:item.set_id,
          set_name:item.set_name,
        }

      },
      saveBar(){
        // this.$set(this.tableData, this.idx, this.form);
        // this.editVisible = false;
        // this.$message.success(`修改第 ${this.idx+1} 行成功`);
        // console.log(this.bar)

        if(this.barTitle == '添加导航'){
           // this.bar.set_id = this.barData.length+1
           // this.barData.push(this.bar)
           this.$axios.post('admin/set/setadd',{
            aid:this.admininfo.admin_id,
            token:this.admininfo.token,
            data:this.bar
           }).then((res) => {
            if(res.data.status == 0){
              this.$message.success('添加成功');
              this.reload()
            }else{
              this.editVisible=false
              this.$message.error(res.data.msg)
            }
           })

        }else if(this.barTitle == '编辑导航'){
          // this.$set(this.barData, this.barID, this.bar);
          this.$axios.post('admin/set/setup',{
            aid:this.admininfo.admin_id,
            token:this.admininfo.token,
            data:this.bar
           }).then((res) => {
            if(res.data.status == 0){
              this.$message.success(`修改第 ${this.barID+1} 个成功`);
              this.reload()
            }else{
              this.editVisible = false
              this.$message.error(res.data.msg)
            }
           })
        }
        // this.editBar = false
      },
      deleteBar(){
        // console.log(this.barID)
        // this.barData.splice(this.barID, 1);
        // this.$message.success('删除成功');
        this.delBar = false;
         this.$axios.post('admin/set/setdel',{
            aid:this.admininfo.admin_id,
            token:this.admininfo.token,
            set_id:this.barData[this.barID].set_id
           }).then((res) => {
            if(res.data.status == 0){
              this.$message.success(`删除成功`);
              this.reload()
            }else if(res.data.status == 30){
              // this.delBar = false
              this.$message.error(`${res.data.msg},商品中存在该规格`)
            }else{
              
              this.$message.error(res.data.msg)
            }
           })
      }
    }
  };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>